<?php $this->_extends('_layouts/pic_basic_layout')?>

<?php $this->_block('title'); ?>
	WebDingus
<?php $this->_endblock(); ?>

<?php $this->_block('pic_pageJs'); ?>
	<script src="<?php echo $js_url; ?>libs/jquery.easing.js"></script>
	<script src="<?php echo $js_url; ?>libs/jquery.masonry.js"></script>
<?php $this->_endblock(); ?>



<?php $this->_block('pic_menu_contents'); ?>
	<?php if(!empty($currAlbum)): ?>
		<h2>
			<?php echo $currAlbum['name']; ?>
			<small>相关类别</small>
		</h2>
	<?php endif; ?>

	<?php 
		$sonAlbums = isset($sonAlbums)? $sonAlbums : array();
		foreach($sonAlbums as $k => $album){
			$sonAlbums[$k]['role'] = 'son';
		}
	
		$brotherAlbums = isset($brotherAlbums)? $brotherAlbums : array();
		foreach($brotherAlbums as $k => $album){
			$brotherAlbums[$k]['role'] = 'brother';
		}
		
		$parentAlbums = isset($parentAlbums)? $parentAlbums : array();
		foreach($parentAlbums as $k => $album){
			$parentAlbums[$k]['role'] = 'parent';
		}
	?>
	<?php $relativeAlbums = array_merge($parentAlbums, $brotherAlbums, $sonAlbums); ?>
	<?php if(!empty($relativeAlbums)): ?>
		<?php $relativeAlbums = array_chunk($relativeAlbums, 6); ?>
		<?php foreach($relativeAlbums as $line => $albums): ?>
			<div class="row-fluid">
				<?php foreach($albums as $k => $album): ?>
					<div class="well span2 top-block albumItem son-noMargin">
						<?php if($album['role'] == 'brother'): ?>
							<span class="label label-important posAbs left-1 top-1 zindexBig">同级类别</span>
						<?php elseif($album['role'] == 'son'): ?>
							<span class="label label-info posAbs left-1 top-1 zindexBig">更详细的类别</span>
						<?php elseif($album['role'] == 'parent'): ?>
							<span class="label label-inverse posAbs left-1 top-1 zindexBig">上一层的类别</span>
						<?php endif; ?>
						<a class="thumbnail" href="<?php echo url('picmaterial/index', array('albumId' => $album['id'])); ?>">
							<img class="h50MaxWparent" src="<?php echo empty($album['coverPicture']['thumbnailFileSrc'])? $img_url . 'default_album_cover.jpg' : $picmaterial_url . $album['coverPicture']['thumbnailFileSrc']; ?>" />
						</a>
						<span><?php echo $album['name']; ?></span>
						<!-- <div>507</div>
						<span class="notification">6</span> -->
					</div>
				<?php endforeach; ?>
			</div>
		<?php endforeach; ?>
	<?php endif; ?>
<?php $this->_endblock(); ?>
	
	
	
<?php $this->_block('pic_contents'); ?>
	<?php if(!empty($currAlbum)): ?>
		<h2>
			<?php echo $currAlbum['name']; ?>
			<small>的图片</small>
		</h2>
	<?php else: ?>
		<h2>
			最新添加
			<small>图片</small>
		</h2>
	<?php endif; ?>
	<blockquote class="span12 noMarginL">
		<div class="Hspace9 posRel" style="overflow: auto;">
			<ul id="photo-container" class="thumbnails"></ul>
		
			<div class="relFixed">
<!--						预览缩放<span id="photo-size-text"></span>%-->
				<div id="photo-size-set" class="Hspace8 zindexBig"></div>
			</div>
		</div>
	</blockquote>	
	
	<script>
		$(function(){
			var slideZoomConf = 0.5;
			var slideInitValue = 26;
			
			$("#photo-size-set").slider({ 
				orientation: 'vertical',
				min: 1,
				max: 100,
				step: 1,
				value: slideInitValue,
				create: function(){$('#photo-size-text').text(slideInitValue);},
				slide: function(event, ui){
					$('#photo-container img').picPortionResize({
						staticSide: 'width',
						setting: {
							staticVal: 180 / slideZoomConf * ui.value / 100,
							anotherMax: 0
						},
						keepSmaller: false	
					});
					waterFall($('#photo-container'));
					$('#photo-size-text').text(ui.value);
				}
			});
			
			$.each(<?php echo json_encode($sonPics); ?>, function(k, pic){
				var newImg = new Image();
				$(newImg).hide();
				$(newImg).load(function(){
					var a = $('<a class="noMargin son-noMargin" href="'+<?php echo json_encode($picmaterial_url); ?>+pic.orifileSrc+'" title="' + pic.name + '" />');		// class="thumbnail"
					a.append($(this));
					$(this).picPortionResize({
						staticSide: 'width',
						setting: {
							staticVal: 180 / slideZoomConf * $( "#photo-size-set" ).slider('value') / 100,
							anotherMax: 0
						},
						keepSmaller: false	
					});
					//$('#photo-container').append(a);
					var well = $('<li class="well top-block" />');
					$(this).appendTo(a);
					a.appendTo(well);
					well.append('<span>'+pic.name+'</span>');
					well.appendTo('#photo-container');
					$(this).fadeIn();
					waterFall($('#photo-container'));	
					$('.thumbnails a').colorbox({rel:'thumbnails a', transition:"elastic", maxWidth:"980px", maxHeight:"700px",preloading:true});
				});
				$(newImg).bind('error', function(){
					$(this).attr('src', '<?php echo $img_url; ?>img_error.jpg');
				});

				$(newImg).attr('src', <?php echo json_encode($picmaterial_url); ?>+pic.thumbnailFileSrc);
			});
		});
	</script>
	
<?php $this->_endblock();?>